<template>
    <!-- 标签条组件 -->
    <div class="tabs">
        <!-- 解释：effect="dark" （使用=深色） 主题的选中状态  -->
        <el-tag v-for="(item, index) in tags" :key="item.path" :effect="$route.name === item.name ? 'dark' : 'plain'"
            @click="changeMenu(item)" :closable="item.name != 'firstPage'" @close="handlerClose(item, index)">
            {{ item.label}} 
        </el-tag>
        
        <!-- $route.name 是路由配置中的name 这里和menu.name比较，所以要用同一套名称-->
    </div>
</template>

<script>
//mapMutations 突变
import { mapState, mapMutations } from 'vuex';

export default {
    name: "commonTabs",
    data() {
        return {}
    },
    methods: {
        //映射vuex的mutations获取方法"closeTag()"
        ...mapMutations(["closeTag"]), 
        //点击标签事件
        changeMenu: function (menu) {
            this.$router.push(menu.path)
        },
        //关闭标签事件
        handlerClose(item, index) {
            console.log("关闭tag",index);
            //关闭菜单，删除tag
            //调用mapMutations映射过来的方法closeTag()
            //也可以使用 this.$store.commit("closeTag",index); 来替换
            this.closeTag(index);
            //动态处理路由跳转,如果关闭的是当前页面（当前子路由），则跳转到首页
            if(item.name===this.$route.name){
                this.$router.push(this.tags[0])
            }
        }
    },
    //计算，返回指定的数据可以直接在视图中使用
    computed: {
        // ## 获得tags
        // # 方法一:
        // 使用对象展开运算符将此对象混入到外部对象中
        // 映射vuex的store中的state对象，后面括号中就可以直接使用state对象的数据
        // ...mapState({
             //将vuex的公共状态数据 tabsList ，赋值给tags。state对象.子模块名称.公共数据变量
             //tags: state => state.tab.tabsList
        // }),
        
        // # 方法二:  
        tags(){
            return this.$store.state.tab.tabsList;  
        }
    }
}
</script>

<style lang="less" scoped>
.tabs {
    position: relative;
    //height: 30px;
    overflow: hidden;
    background: #fff;
    //padding-right: 120px;
    box-shadow: 0 5px 10px #ddd;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 15px;

    .el-tag {
        margin-right: 15px;
        cursor: pointer
    }
}
</style>